<template>
	<view class="rengongTie-box">
		<view class="wxZfb">
			<view class="weixin" v-for="(item,index) in typeList" :key="index" @click="changeType(index)"
				:class="[typeCurrent==index?'isColor':'']">
				<view style="background-color: #ffffff;border-radius: 50%;width: 60rpx;height: 60rpx;">
					<image :src="item.icon" mode="aspectFit" style="width: 60rpx;height: 60rpx;display:block;"></image>
				</view>
				<text style="margin-left: 10rpx;">{{item.text}}</text>
			</view>
		</view>
		<view class="daojishi">
			<image src="../../static/daojishi.png" mode="aspectFit" style="width:40rpx;height: 40rpx;"></image>
			<text>预计此项花费1~2分钟,商家会快速审核!请耐心等待!</text>
		</view>
		<view class="wxFindBill" v-if="typeCurrent==0">
			<view class="title"><text class="one">1</text>查找{{findBillText}}账单</view>
			<view class="title1">进入微信->我->服务->钱包->右上方"账单"</view>
			<view class="wxImg">
				<image @click="enlarge('w1')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/f8cb3ea0a9704b75919e11e12595bae2.png"
					mode="aspectFill"></image>
				<image @click="enlarge('w2')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/51b79b4c7c2a47658d64a35c8b93303a.png"
					mode="aspectFill"></image>
				<image @click="enlarge('w3')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/049ed3f40b26435ba062d31257df4d71.png"
					mode="aspectFill"></image>
			</view>
			<view class="title" style="margin-top: 20rpx;"><text class="one">2</text>下载账单</view>
			<view class="title1">右上角"常见问题"->下载账单->用作材料证明(必须此项)</view>
			<view class="wxImg">
				<image @click="enlarge('w4')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/490fa542435a42ffaf173906a207f7a8.png"
					mode="aspectFill"></image>
				<image @click="enlarge('w5')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/522c525026ae4298b3c015cde6782e38.png"
					mode="aspectFill"></image>
				<image @click="enlarge('w6')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/30618fbaf263429a9b8d22fe9878477e.png"
					mode="aspectFill"></image>
			</view>
			<view class="title1">点击自定义事件选择近12个月->发送至邮箱:{{billReceiveEmail}}</view>
			<view class="wxImg">
				<image @click="enlarge('w7')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/8514738a42ab4b2190ce7dbdc6cd5ebe.png"
					mode="aspectFill"></image>
				<image @click="enlarge('w8')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/46f3d6ec84dc4ddcb0d25b531ff36c22.png"
					mode="aspectFill"></image>
				<view style="width: 200rpx;height: 200rpx;"></view>
			</view>
		</view>
		<view class="wxFindBill" v-if="typeCurrent==1">
			<view class="title"><text class="one">1</text>查找{{findBillText}}账单</view>
			<view class="title1">进入支付宝->我->账单->右上角...->点击"开具流水交易证明"</view>
			<view class="wxImg">
				<image @click="enlarge('z1')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c0820da1fd9942dab787a78a9c3d64bf.png"
					mode="aspectFill"></image>
				<image @click="enlarge('z2')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/5eced50b959b4f53800e95ac5fefbb0c.png"
					mode="aspectFill"></image>
				<image @click="enlarge('z3')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/0c2aeb4126ea4a86a11ad6fdc505d355.png"
					mode="aspectFill"></image>
			</view>
			<view class="title" style="margin-top: 20rpx;"><text class="one">2</text>下载账单</view>
			<view class="title1">点击第二项"用作材料证明"((必须此项))->点击全部交易->自定义时间范围选择12个月->发送到邮箱:{{billReceiveEmail}}</view>
			<view class="wxImg">
				<image @click="enlarge('z4')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/a5c48c57c8054dff97520f97413cca14.png"
					mode="aspectFill"></image>
				<image @click="enlarge('z5')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/642a3960765c497ab8b93e087127b6b4.png"
					mode="aspectFill"></image>
				<image @click="enlarge('z6')"
					src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c250fa0a87b14320a02481dbe2744ebe.png"
					mode="aspectFill"></image>
			</view>
		</view>
		<view class="daojishi1">
			<image src="../../static/daojishi.png" mode="aspectFit" style="width:40rpx;height: 40rpx;"></image>
			<text>发送至指定邮箱: {{billReceiveEmail}}</text>
			<text class="copy" style="color: red;" @click="copyYouxiang">复制</text>
		</view>
		<view class="daojishi2" @click="changeComBilText">
			<text class="text2">
				我已完成,去{{completeBillText}}账单
			</text>
		</view>

		<!-- 放大图片的蒙层 -->
		<view class="bigMengceng" v-if="bigMengcengSta" @click="tabMengceng">
			<!-- <image class="xiangzuo" src="../../static/xiangzuo.png" @click.stop="nextOneImg('left')" mode="aspectFit" style="width: 100rpx;height: 100rpx;"></image> -->
			<image :src="enlargeImgsUrl" mode="widthFix" style="width: 600rpx;" @click="tabMengceng"></image>
			<!-- <image class="xiangyou" src="../../static/xiangyou.png" @click.stop="nextOneImg('right')" mode="aspectFit" style="width: 100rpx;height: 100rpx;"></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				billReceiveEmail: '',
				bigMengcengSta: false,
				enlargeImgsUrl: '',
				typeList: [{
						text: '微信账单',
						icon: '../../static/wx.png',
					},
					{
						text: '支付宝账单',
						icon: '../../static/zfb.png',
					}
				],
				typeCurrent: 0,
				findBillText: '微信',
				completeBillText: '支付宝',
				imagesList: [{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/f8cb3ea0a9704b75919e11e12595bae2.png',
						id: 'w1'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/51b79b4c7c2a47658d64a35c8b93303a.png',
						id: 'w2'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/049ed3f40b26435ba062d31257df4d71.png',
						id: 'w3'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/490fa542435a42ffaf173906a207f7a8.png',
						id: 'w4'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/522c525026ae4298b3c015cde6782e38.png',
						id: 'w5'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/30618fbaf263429a9b8d22fe9878477e.png',
						id: 'w6'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/8514738a42ab4b2190ce7dbdc6cd5ebe.png',
						id: 'w7'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/46f3d6ec84dc4ddcb0d25b531ff36c22.png',
						id: 'w8'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c0820da1fd9942dab787a78a9c3d64bf.png',
						id: 'z1'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/5eced50b959b4f53800e95ac5fefbb0c.png',
						id: 'z2'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/0c2aeb4126ea4a86a11ad6fdc505d355.png',
						id: 'z3'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/a5c48c57c8054dff97520f97413cca14.png',
						id: 'z4'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/642a3960765c497ab8b93e087127b6b4.png',
						id: 'z5'
					},
					{
						img: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c250fa0a87b14320a02481dbe2744ebe.png',
						id: 'z6'
					}
				]

			};
		},
		mounted() {
			this.getBillEmail()
		},
		methods: {
			//点击放大图片向左向右点击
			nextOneImg() {
				console.log('111');
			},
			//获取账单接收的指定邮箱
			getBillEmail() {
				this.$request('member/mall/alipay/applet/getServiceEmainByAppid', {}, 'get', false, true).then((res) => {
					if (res.businessSuccess || res.success) {
						this.billReceiveEmail = res.data || '563514@qq.com'
					}
				});
			},
			changeType(ind) {
				this.typeCurrent = parseInt(ind)
				if (this.typeCurrent == 0) {
					this.findBillText = '微信'
					this.completeBillText = '支付宝'
				} else {
					this.findBillText = '支付宝'
					this.completeBillText = '微信'
				}
				console.log('222', this.findBillText);
			},
			changeComBilText() {
				if (this.typeCurrent == 0) {
					this.typeCurrent = 1
					this.findBillText = '支付宝'
					this.completeBillText = '微信'
				} else {
					this.typeCurrent = 0
					this.findBillText = '微信'
					this.completeBillText = '支付宝'
				}
			},
			copyYouxiang() {
				uni.setClipboardData({
					data: this.billReceiveEmail,
					success: (r) => {
						uni.showToast({
							title: '复制邮箱成功',
							icon: 'none'
						});
					}
				});
			},
			enlarge(text) {
				this.imagesList.forEach(item => {
					if (text == item.id) {
						let imgs = item.img
						console.log('要放大的图片', imgs);
						this.enlargeImgsUrl = imgs
						this.bigMengcengSta = true
					}
				})
			},
			tabMengceng() {
				this.bigMengcengSta = false
				this.enlargeImgsUrl = ''
			}
		}
	};
</script>

<style lang="less" scoped>
	.rengongTie-box {
		.wxZfb {
			display: flex;
			justify-content: center;
			background-color: #fff4e6;
			width: max-content;
			margin: 30rpx auto;
			border-radius: 50rpx;
			overflow: hidden;

			.weixin {
				display: flex;
				align-items: center;
				padding: 15rpx 50rpx;
				border-radius: 50rpx;
				letter-spacing: 0.1em;
				// background-color: #fff4e6;
				// background-color: #be9263;
				// background-color: #ffffff;
				background-color: #fff4e6;
				color: #aa8159;
			}

			.isColor {
				color: #ffffff;
				font-weight: 600;
				border-radius: 50rpx;
				background-color: #be9263;
			}
		}

		.daojishi {
			width: 90%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			// width: max-content;
			background-color: #fff4e6;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			margin: 0 auto;
		}

		.daojishi1 {
			// padding: 20rpx 0;
			width: 90%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 28rpx;
			// width: max-content;
			background-color: #fff4e6;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			margin: 30rpx auto;

			.copy {
				margin-left: auto;
				color: '#be9263';
			}
		}

		.daojishi2 {
			display: inline-block;
			width: 100%;
			font-size: 20rpx;
			text-align: center;
			color: #ffffff;
			border-radius: 20rpx;
			// margin: 0 auto 100rpx auto;
			margin-bottom: 100rpx;
			position: relative;

			.text2 {
				border-radius: 50rpx;
				letter-spacing: 0.1em;
				font-size: 30rpx;
				padding: 20rpx 0;
				width: 90%;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
				display: block;
				background-color: #5cd594;

			}
		}

		.wxFindBill {
			width: 90%;
			margin: 20rpx auto;
			// overflow: hidden;
			box-sizing: border-box;
			// padding: 30rpx 0;

			.title {
				font-weight: 600;
				letter-spacing: 0.1em;

				.one {
					margin-right: 20rpx;
					display: inline-block;
					background-color: #be9263;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 50rpx;
					color: #ffffff;

				}
			}

			.title1 {
				color: #a5a5a5;
				margin: 20rpx 0;
			}

			.wxImg {
				width: 100%;
				display: flex;
				justify-content: space-between;

				image {
					width: 30%;
				}
			}
		}

		.bigMengceng {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100vh;
			z-index: 9;
			background: rgba(94, 94, 94, 0.8);

			display: flex;
			justify-content: center;
			align-items: center;

			.xiangyou {
				position: absolute;
				top: 50%;
				right: 50rpx;
				z-index: 999;
			}

			.xiangzuo {
				position: absolute;
				top: 50%;
				left: 50rpx;
				z-index: 999;
			}
		}
	}
</style>